<template>
	<view>
		<view style="color:#18B566;" class="u-padding-20">* 可修改项</view>
		<view class="intro_con margin_auto u-padding-20">
			<!-- @click="isshow = true" -->
			<view class="intro_list u-rela" >
				<text class="u-abso pos_left">头像</text>
				<image class="u-abso pos_right" :src="userinfo.avatar" mode=""></image>
				<u-icon style="top:10rpx;" class="u-abso pos_right" name="arrow-right" size="35rpx"></u-icon>
			</view>
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">昵称</text>
				<input class="u-abso pos_right pos_up_center" v-if="ismodify" type="text" v-model="nickname" value="" />
				<text v-else class="u-abso pos_right">{{userinfo.nickname}}</text>
			</view>
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">地址</text>
				<input class="u-abso pos_right pos_up_center" v-if="ismodify" type="text" v-model="address" value="" />
				<text v-else class="u-abso pos_right">{{userinfo.address}}</text>
			</view>
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">邮箱</text>
				<input class="u-abso pos_right pos_up_center" v-if="ismodify" type="text" v-model="email" value="" />
				<text v-else class="u-abso pos_right">{{userinfo.email}}</text>
			</view>
		</view>
		<view style="color:#007AFF;" class="u-padding-20">* 固定项</view>
		<view class="intro_con margin_auto u-padding-20">
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">姓名</text>
				<text class="u-abso pos_right">{{userinfo.name}}</text>
			</view>
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">电话</text>
				<text class="u-abso pos_right">{{userinfo.phone}}</text>
			</view>
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">职位</text>
				<text class="u-abso pos_right">{{userinfo.post}}</text>
			</view>
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">部门</text>
				<text class="u-abso pos_right">{{userinfo.depart}}</text>
			</view>
			<view class="intro_list u-rela">
				<text class="u-abso pos_left">工号</text>
				<text class="u-abso pos_right">{{userinfo.job_no}}</text>
			</view>
		</view>
		<view class="tips">
			<u-icon name="error" size="25rpx"></u-icon>
			<text>若想修改信息，请联系后台管理员！</text>
		</view>
		<!-- <button class="btn_con margin_auto pos_center" @click="modify">修改资料</button> -->
		
		<u-popup v-model="isshow" mode="center" width=60% closeable=true>
			<view style="height:400rpx;">
				<u-upload ref="uUpload" :action="action" @on-Success="onSuccess" max-count="1" :auto-upload="false" ></u-upload>
				<button class="btn_con1 margin_auto u-margin-top-50">确认上传</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data () {
			return {
				userinfo:{
					avatar:'http://www.gsxcxh.com/static/upload/image/20220412/1649756273277860.jpg',
					nickname:'未登录',
					phone:'电话',
					name:'空',
					post:'岗位名称',
					depart:'所属部门',
					job_no:'工号',
					company:'所属公司'
				},
				isshow:false,
				action: 'https://api.gslhzhwy.com',
				fileList:[],
				
				ismodify:false,
				// nickname:'猪猪侠',
				// address:'兰州中心',
				// email:'13245852@qq.com'
			}
		},
		mounted() {
			this.userinfo=uni.getStorageSync('lifeData')
			// console.log(this.userinfo)
		},
		methods:{
			modify:function(){
				this.ismodify=!this.ismodify
			},
			onSuccess(data, index, lists){
				//页面上定义的临时存放图片的对象，提示也保存后台返回的图片名称
				let currentFile = {name: '', url: ''};
				currentFile.name = JSON.parse(data).name;
				currentFile.url = JSON.parse(data).imgUrl;
				//成功上传一个图片就往fileList里面添加一个图片对象
				this.fileList.push(currentFile);
				
				//this.form.pictureUrl为后台图片字段来保存字符串类型的图片集合
				this.form.pictureUrl = JSON.stringify(this.fileList)
				//console.log("打印图片List：onSuccess", this.fileList);
			},
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #eee;
	}
	.intro_con{
		width:95%;
		margin-bottom:20rpx;
		// height:300rpx;
		border-radius: 15rpx;
		background-color: #fff;
	}
	.intro_list{
		height:70rpx;
		line-height: 70rpx;
	}
	.intro_list image{
		right:60rpx;
		top:0rpx;
		width:60rpx;
		height:60rpx;
		border-radius: 50%;
	}
	.intro_list input{
		width:50%;
		padding:10rpx 0;
		font-size: 28rpx;
		text-align: right;
		border-bottom:1rpx solid #ddd;
	}
	.btn_con1{
		line-height: 70rpx;
		width:90%;
		height:70rpx;
		color:#fff;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		// background-color: #006971;
	}
	.btn_con{
		position: fixed;
		bottom:60rpx;
		height:70rpx;
		line-height: 70rpx;
		width:95%;
		color:#fff;
		font-size: 30rpx;
		border-radius: 35rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20220825/d1aa35c1d129137d9b12c8f34e59c5bc.png');
		background-size: 100% 70rpx;
		// background-color: #006971;
	}
	.upload{
		// width:60% !important;
		
	}
	.data-v-6cbfbe2a{
		margin:30rpx auto 0;
	}
	.tips{
		font-size: 25rpx;
		color:#006971;
		padding:20rpx 0;
	}
	
</style>
